<template>
    <div class="myCharts">
        <div class="title-top"><div class="title-top-line"></div><div>{{title}}</div></div>
            <div id="myChart" style="width: 90%;height:300px;">
        </div>
    </div>
</template>
 

<script>
export default {
    name:"zxEchart",
    props:{
        title:'',        //标题
        day:{            //横坐标
            type: Array,
            default: []
        },
        charge_money:{       //充值金额纵坐标
            type: Array,
            default: []
        },   
        dispatch_money:{         //代发金额纵坐标
            type: Array,
            default: []
        },     
    },
    data(){
        return {
            orgOptions:{}
        }
    },
    mounted(){
    },
    methods:{
        drawColumn(){
                this.myChart = this.$echarts.init(document.getElementById('myChart'))
                var option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                lineStyle: {
                                    color: '#dddc6b'
                                }
                            }
                        },
                        grid: {
                            left: '10',
                            top: '30',
                            right: '10',
                            bottom: '10',
                            containLabel: true
                        },
                        legend: {
                            data: ['充值金额', '代发金额']
                        },

                        xAxis: [{
                            type: 'category',
                            boundaryGap: true,
                            axisLabel: {
                                textStyle: {
                                    color: "rgba(162,162,162,.6)",
                                    fontSize: 12,
                                },
                                formatter: '{value}'
                            },
                            axisLine: {
                                lineStyle: {
                                    color: 'rgba(162,162,162,.2)'
                                }

                            },
                            data: this.day
                        }],
                        yAxis: [{           
                            type: 'value',
                            axisTick: { show: false },
                            axisLine: {
                                lineStyle: {
                                    color: 'rgba(60,121,237,.1)'
                                }
                            },
                            axisLabel: {
                                textStyle: {
                                    color: "rgba(60,121,237,.6)",
                                    fontSize: 12,
                                },
                            },
                            splitLine: {
                                lineStyle: {
                                    color: 'rgba(60,121,237,.1)'
                                }
                            }
                        }],
                        series: [{
                                name: '充值金额',
                                type: 'line',
                                smooth: true,
                                symbol: 'circle',
                                symbolSize: 5,
                                showSymbol: false,
                                lineStyle: {
                                    normal: {
                                        color: '#3C79ED',
                                        width: 2
                                    }
                                },
                                areaStyle: {
                                    normal: {
                                        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, 
                                                [{
                                                    offset: 0,
                                                    color: 'rgba(60,121,237, 0.8)'
                                                }, {
                                                    offset: 0.8,
                                                    color: 'rgba(60,121,237, 0.1)'
                                                }], false),
                                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: '#0184d5',
                                        borderColor: 'rgba(60,121,237, .1)',
                                        borderWidth: 12
                                    }
                                },
                                data: this.charge_money
                                // data: this.charge_money
                            },{
                                name: '代发金额',
                                type: 'line',
                                smooth: true,
                                symbol: 'circle',
                                symbolSize: 5,
                                showSymbol: false,
                                lineStyle: {
                                    normal: {
                                        color: 'rgba(250,128,114,1)',
                                        width: 2
                                    }
                                },
                                areaStyle: {
                                    normal: {
                                        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, 
                                                [{
                                                    offset: 0,
                                                    color: 'rgba(250,128,114, 0.8)'
                                                }, {
                                                    offset: 0.8,
                                                    color: 'rgba(250,128,114, 0.1)'
                                                }], false),
                                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: 'rgba(250,128,114,1)',
                                        borderColor: 'rgba(250,128,114, .1)',
                                        borderWidth: 12
                                    }
                                },
                                // data: [12,25,30,60,12,1,10,15,12,6]

                                data: this.dispatch_money
                            }                                                                          

                        ]

            };
            this.myChart.setOption(option);
        }
    },
    mounted(){
        this.drawColumn();
        //当窗口改变时，改变图标的尺寸
        window.addEventListener('resize', ()=>{
            this.myChart.resize();
        })

    }
}
</script>


<style lang="less"  :scope="true">
.myCharts{
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    #myChart{
         position: relative;
         margin-left: 5%;
         margin-top: 30px;
    }
    .title-top{
        height: 45px;
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 14px;
        background: #ffffff;
        color: #000000;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 1000;
        .title-top-line{
            width: 2.5px;
            height: 20px;
            background: #4280F2;
            margin: 0  10px;
        }
    }
}
</style>